<template>
    <div class="container" :style="'min-height: '+$docHeight+'px'">
        <div v-if="showCont&&!showTimeOut">
            <div class="bannerCont">
                <div class="bannerLeft">
                    <div class="bannerName">预约成功</div>
                    <div class="bannerMain">
                        <div class="bannerDesItem">祝您早日康复</div>
                        <div class="bannerDesItem">愿您在医院得到最好的照顾。</div>
                    </div>
                    <!-- <img class="bannerLeftImg" src="/img/lifeIcon2.png" /> -->
                </div>
                <img class="bannerImg" src="/img/orderBanner.png" />
            </div>
            <div class="formCont">
                <div class="orderStatus">
                    <img src="/img/success.png" />
                </div>
                <div class="formTitle">
                    <div class="shuIcon"></div>
                    <div>预约信息</div>
                </div>
                <div class="formInput">
                    <div class="inputName">医生姓名</div>
                    <div class="authVal">倪鑫博士(主任医师)</div>
                </div>
                <div class="formInput">
                    <div class="inputName">就诊姓名</div>
                    <div class="authVal">吴欢</div>
                </div>
                <div class="formInput">
                    <div class="inputName">就诊性别</div>
                    <div class="authVal">男</div>
                </div>
                <div class="formInput">
                    <div class="inputName">预约时间</div>
                    <div class="authVal">2024-06-31 11:30</div>
                </div>
            </div>
            <div class="formCont">
                <div class="formTitle">
                    <div class="shuIcon"></div>
                    <div>订单信息</div>
                </div>
                <div class="formInput">
                    <div class="inputName">订单编号</div>
                    <div class="authVal">YD374539282783</div>
                </div>
                <div class="formInput">
                    <div class="inputName">支付金额</div>
                    <div class="authVal">¥15.00</div>
                </div>
                <div class="formInput">
                    <div class="inputName">支付方式</div>
                    <div class="authVal">微信支付</div>
                </div>
                <div class="formInput">
                    <div class="inputName">支付时间</div>
                    <div class="authVal">2024-06-31 09:31:41</div>
                </div>
            </div>
            <div class="formCont">
                <div class="formTitle">
                    <div class="shuIcon"></div>
                    <div>就诊结论</div>
                </div>
                <div class="formInput">
                    <div class="inputName">情况描述</div>
                    <div class="authVal">YD374539282783</div>
                </div>
                <div class="formInput">
                    <div class="inputName">结论备注</div>
                    <div class="authVal">YD374539282783</div>
                </div>
                <div class="formInput">
                    <div class="inputName">诊断建议</div>
                    <div class="authVal">YD374539282783</div>
                </div>
                <div class="formInput">
                    <div class="inputName">报告时间</div>
                    <div class="authVal">2024-06-31 09:31:41</div>
                </div>
                <div class="formTitle hasTop">
                    <div class="shuIcon"></div>
                    <div>报告图片</div>
                </div>
                <div class="formImg">
                    <div :class="index%3==0?'noLeft formImgItem':'formImgItem'" :key="index" v-for="(item,index) in resultImgArr">
                        <img @click="showDetailImg(index)" :src="item" />
                    </div>
                </div>
            </div>
            <div class="tipCont">
                <div class="tipHead">注意事项：</div>
                <div class="tipItem">手机挂号后本市医保及非医保患者请按时到门诊楼各层带有安贞医院标识的自助机上取号就诊，异地医保患者请携带患者本人医保卡及身份证，到门诊楼南侧挂号大厅人工窗口取号</div>
            </div>
        </div>
        <van-image-preview :startPosition="startPosition" v-model:show="showVantImg" :images="priveImg">
        </van-image-preview>
    </div>
</template>
<script>
    export default {
        components: {},
        name:'',
        data() {
            return {
                showTimeOut: false,
                showCont:false,
                priveImg:[],
                showVantImg:false,
                startPosition:0,
                resultImgArr:["https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/6e8467c02aad2e692d4eda853ebc0e04bc13e700.jpg","https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/3719194823c3bf3e7bb328d3f408bcd58594cdc8.jpg","https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/30954c2d927a40f4cc8bd30c710cad5a94fac38f.jpg",]
            }
        },
        props: {},
        setup(){},
        methods:{
            showDetailImg(index){
                this.startPosition =  index
                this.priveImg = this.resultImgArr
                this.showVantImg = true
            },
        },
        mounted(){},
        created() {
            this.showCont = true
        },
    }
</script>
<style scoped lang="less">
.container{
    box-sizing: border-box;
    padding-bottom: 1.25rem;
    background-color: #ebf9f3;
    .bannerCont{
        width: 100%;
        // height: 20rem;
        background-image: linear-gradient(to bottom, #5cc78e,#ebf9f3);
        color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 2rem 4% 0rem;
        box-sizing: border-box;
        .bannerImg{
            flex: 1;
            width: 1rem;
            position: relative;
            top: -1rem;
        }
        .bannerLeft{
            width: 12rem;
            position: relative;
            .bannerName{
                font-size: 1.2rem;
                font-weight: bold;
                position: relative;
                top: -0.7rem;
            }
            .bannerLeftImg{
                width: 4rem;
            }
            .bannerMain{
                position: relative;
                font-size: 0.7rem;
                .bannerDesItem{
                    margin-bottom: 0.25rem;
                }
            }
        }
    }
    .formCont{
        background-color: #fff;
        width: 92%;
        margin: 0 auto 0.75rem;
        position: relative;
        overflow: hidden;
        padding: 1rem 4%;
        border-radius: 0.25rem;
        
        box-sizing: border-box;
        .orderStatus{
            position: absolute;
            right: 0rem;
            top: 0rem;
            img{
                width: 5rem;
                transform: rotate(50deg);
            }
        }
        .formTitle{
            font-size: 0.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            color: #5cc78e;
            .shuIcon{
                width: 0.2rem;
                height: 1rem;
                background-color: #5cc78e;
                border-radius: 0.1rem;
                margin-right: 0.75rem;
            }
        }
        .hasTop{
            margin-top: 1.25rem;
        }
        .formInput{
            display: flex;
            box-sizing: border-box;
            align-items: center;
            width: 100%;
            margin-bottom: 0.5rem;
            color: #777;
            .inputName{
                width: 3.5rem;
            }
            .authVal{
                flex: 1;
                width: 2rem;
            }
        }
        .formImg{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            .formImgItem{
                width: 31%;
                margin-left: 3.5%;
                border-radius: 0.25rem;
                overflow: hidden;
                max-height: 4.8rem;
                margin-bottom: 0.4rem;
                img{
                    width: 100%;
                    border-radius: 0.25rem;
                }
            }
            .noLeft{
                margin-left: 0;
            }
        }
    }
    .tipCont{
        background-color: #fff;
        width: 92%;
        margin: 0 auto;
        padding: 0.75rem 4%;
        border-radius: 0.25rem;
        box-sizing: border-box;
        .tipHead{
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #5cc78e;
        }
        .tipItem{
            margin-bottom: 0.5rem;
            color: #999;
            font-size: 0.6rem;
            .redText{
                color: #5cc78e;
            }
        }
    }
}
</style>